<template>
  <div class="accidentTypes-root">
    <formTitleVue
      title="事故类型分布"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <!-- <div id="echarts-types"></div> -->
    <myPieRing domId="accident-accidentTypes-echarts" height="30vh" :chartsData="chartsData" :myOption="echartsOption"/>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import myPieRing from '@/components/Echarts/myPieRing.vue';
import { time_select_optios } from '@/utils/global.js';
import { accidentTypes } from '@/api/risk/accidentCases'
export default {
  name: "accidentTypes",
  components: {
    formTitleVue,myPieRing,
  },
  data() {
    return {
      selectOptions: [
        {
          selectValue: "",
          options: this.typeOptions,
          changeFn: this.selectChange1,
        },
        {
          selectValue: "近一月",
          options:[
            { label: "近一月", value: "近一月" },
            { label: "近半年", value: "近半年" },
            { label: "近一年", value: "近一年" },
          ],
          changeFn: this.selectChange,
        }
      ],
      chartsData: {
        xData: ["市政设施", "房屋建筑", "交通设施", "人员密集区域"],
        yData: [],
      },
      echartsOption:{

      },
      typeOptions:[],
      searChForm: {
        startTime: '',
        endTime: '',
        accidentCaseLargeType:""
      },
    };
  },
  watch: {
    'typeOptions': {
      handler(newVal, oldVal) {
        this.selectOptions[0].options = newVal;
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    selectChange1(item){
      this.searChForm.accidentCaseLargeType = item
      this.getData()
    },
    selectChange(item) {
      // console.log(item);
      this.searChForm.startTime = time_select_optios[item].startTime
      this.searChForm.endTime = time_select_optios[item].endTime
      this.getData()
    },
    getData(){
      this.searChForm.areaCode = this.$store.state.account.user.deptIds;
      this.searChForm.placeType = this.$commonJs.getPlaceType(this.searChForm.areaCode);
      // console.log(this.searChForm);
      accidentTypes(this.searChForm).then(r=>{
        if(r.code==200){
             let res = r.data.report
          this.chartsData.yData = [
            {
              name:"事故类型分布",
              radius : ['40%', '60%'],
              center: ["30%", "50%"],
              data: res
            }
          ]
          let total = 0
          // 给每个饼块统一添加引导文字
          this.chartsData.yData.forEach(item => {
            item.data.forEach(item => {
              // 隐藏引导线和文字
              item.label = {
                normal:{
                  show: true,
                  formatter: "{b}\n{d}%",
                },
              }
              item.labelLine = {
                show: true,
              }
              total += item.value
            })
          })
          this.echartsOption = {
            title:{
              text: `事故总数`,
              left: "29%",
              top: "42%",
              textVerticalAlign:'top',
              textAlign:'center',
              textStyle: {
                color: "#5A5A5A",
                fontSize: 12,
              },
              subtext: total,
              subtextStyle: {
                // verticalAlign:'top',
                color: "#5A5A5A",
                fontSize: 16,
              },
            },
            legend:{
              orient: 'vertical',
              top: 'middle',
              right: '5%',
              // formatter: 'Legend {name}',
              // 使用回调函数
              formatter: function (name) {
                for(let item of res){
                  if(item.name == name){
                    let p
                    if(total == 0 || !item.value){
                      p = 0
                    }else{
                      p = (item.value/total*100).toFixed(2)
                    }
                    return `${name} ${item.value} 占比${p}%`
                  }
                }
              }
            }
          }
        }
      })
    },
  },
  mounted() {
    this.selectChange(this.selectOptions[1].selectValue)
  },
  created(){
    let temp = []
    this.typeOptions = []
    this.$commonJs.filterDataDict("riskAccidentCasesType", temp)
    this.typeOptions = temp.map(t=>{
      let value = JSON.parse(t.name)
      return {label: t.label, value: value.value}
    })
    this.typeOptions.unshift({label:"全部", value:""})
  }
};
</script>

<style lang="scss" scoped>
.accidentTypes-root {

}
</style>
